<template>
    <div class="user-manage">
     <!-- 查询用户 -->
       <div class="query-form">
             <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="订单id">
                <el-input v-model="formInline.idzhenpiOrderList" placeholder="订单id" clearable />
              </el-form-item>
              <el-form-item label="物料名称">
                <el-input v-model="formInline.name" placeholder="物料名称" clearable />
              </el-form-item>
              <el-form-item label="物料状态" placeholder="用户名"  clearable>
                <el-select
                  v-model="formInline.state"
                  placeholder="物料状态"
                  clearable
                >
                  <el-option label="绗缝" :value="1" />
                  <el-option label="刺绣" :value="2" />
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="Activity time">
                <el-date-picker
                  v-model="formInline.date"
                  type="date"
                  placeholder="Pick a date"
                  clearable
                />
              </el-form-item> -->
              <el-form-item>
                <el-button type="primary" @click="onChaxun">查询</el-button>
              </el-form-item>
            </el-form>
       </div>
       <!-- 用户信息列表 -->
       <div class="base-table" >
           <div class="action">
             <!-- <el-button size="small" type="primary" @click="userFormVisible = true" >新增</el-button> -->
             <el-button size="small" type="danger" @click="nextGongxu">下一工序</el-button>
           </div>

         <el-table
           :data="tableData"
           @selection-change="handleSelectionChange"
           ref="multipleTableRef"
           style="width: 100%;height: calc(100vh - 215px);"
         >
        <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column 
             v-for="item in columns"  
              :key="item.prop"
               :prop="item.prop" 
               :label="item.label"
               :formatter="item.formatter" 
               :width="item.width"
               show-overflow-tooltip
            />
         </el-table>

        </div>
 
        <!-- 新增材料弹窗 -->
        <el-dialog v-model="userFormVisible" title="新增真皮材料" width="700" center>
          <el-form :model="addUserForm" class="demo-form-inline1">
            <el-form-item label="材料编码" label-width="120px" >
              <el-input v-model="addUserForm.idzhenpiList" placeholder="材料编码" clearable />
            </el-form-item>
            <el-form-item label="材料名称" label-width="120px">
              <el-input v-model="addUserForm.name" placeholder="请输入材料名称" clearable />
            </el-form-item>
            <el-form-item label="颜色" label-width="120px" >
              <el-input v-model="addUserForm.color" placeholder="请输入材料颜色" clearable />
            </el-form-item>
            <!-- <el-form-item label="颜色" label-width="120px" >
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="材料类型" label-width="120px">
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="粗细" label-width="120px" >
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item> -->
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="quxiaoUserForm">取消</el-button>
              <el-button type="primary" @click="querenUserForm">
                确认
              </el-button>
            </div>
          </template>
        </el-dialog>


         <!-- 编辑材料弹窗 -->
         <el-dialog v-model="editFormVisible" title="修改真皮材料" width="700" center>
          <el-form :model="editForm" class="demo-form-inline1">
            <el-form-item label="材料编码" label-width="120px" >
              <el-input v-model="editForm.idzhenpiList" placeholder="材料编码" clearable />
            </el-form-item>
            <el-form-item label="材料名称" label-width="120px">
              <el-input v-model="editForm.name" placeholder="请输入材料名称" clearable />
            </el-form-item>
            <el-form-item label="颜色" label-width="120px" >
              <el-input v-model="editForm.color" placeholder="请输入材料颜色" clearable />
            </el-form-item>
            <!-- <el-form-item label="颜色" label-width="120px" >
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="材料类型" label-width="120px">
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="粗细" label-width="120px" >
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item> -->
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="quxiaoEditForm">取消</el-button>
              <el-button type="primary" @click="querenEditForm">
                确认
              </el-button>
            </div>
          </template>
        </el-dialog>

        <!-- 下一工序 弹窗 -->
        <el-dialog v-model="rukuFormVisible"  title="进入下一个工序" width="1200" center>

          <el-table :data="tanchuangData" style="padding: 20px;">
            <el-table-column prop="name" label="名字" width="500px"></el-table-column>
            <el-table-column prop="zhenpiyuancai" label="原材数量" width="100px"></el-table-column>
            <el-table-column prop="state" label="当前工序" width="100px"></el-table-column>
            <el-table-column prop="hangfengChanchu" label="绗缝产出" width="100px">
             <template #default="scope">
               <el-input v-if="scope.row.state == 1" v-model="scope.row.hangfengChanchu" @input="updateHangfengbaofei(scope.row)" clearable></el-input>
             </template>
           </el-table-column>
           <el-table-column prop="hangfengbaofei" label="绗缝报废" width="100px"></el-table-column>
           <el-table-column  prop="cixiuchanchu" label="刺绣产出" width="100px">
             <template #default="scope">
               <el-input v-if="scope.row.state == 2" v-model="scope.row.cixiuchanchu" @input="updateCixiubaofei(scope.row)" clearable></el-input>
             </template>
           </el-table-column>
           <el-table-column  prop="cixiubaofei" label="刺绣报废" width="100px"></el-table-column>
          </el-table>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="quxiaoUserForm">取消</el-button>
              <el-button type="primary" @click="querenGongxuForm">
                确认
              </el-button>
            </div>
          </template>
        </el-dialog>
    </div>
 </template>
   
   <script setup>
   import { computed, onMounted, reactive, ref,toRaw ,readonly,markRaw} from 'vue'
   import {getCailiaoList} from "../../api/cailiao"
   import {getzhenpiList,addzhenpiList,deletezhenpiList,editzhenpiList,getzhenpiOrderList,editzhenpiOrderList} from "../../api/zhenpi"
 
   //新增真皮材料
   const userFormVisible = ref(false)
   //修改真皮材料
   const editFormVisible = ref(false)
   //表格的ref
   const multipleTableRef = ref()
   //多选选中的集合的数组
   const multipleSelection = ref() 
   //选中的合集展示在弹窗中，使用的变量名
   const tanchuangData = ref()
   //多选弹窗
   const rukuFormVisible = ref()
   //多选选中触发的函数
   const handleSelectionChange = (val) => {
     multipleSelection.value = val
     console.log(val)
   }

   
//下一工序按钮函数
   const nextGongxu = ()=>{
    //去除数据的proxy属性
    const data = JSON.parse(JSON.stringify(multipleSelection.value))
    console.log(data)
    tanchuangData.value = data
    rukuFormVisible.value = true
   }
//绗缝报废，数据自动结算
const updateHangfengbaofei = (row) => {
  row.hangfengbaofei = row.zhenpiyuancai - row.hangfengChanchu;
};
//刺绣报废，数据自动结算
const updateCixiubaofei = (row) =>{
  row.cixiubaofei = row.hangfengChanchu - row.cixiuchanchu
}

//  表格加载数据存放
   const tableData = ref([])
   //头部的查询form的表单
   const formInline = ref({})
 //添加用户的表单
   const addUserForm = ref({
     username:"",
     password:"",
     state:""
   })

   const editForm = ref()
 
// table中的表头
   const columns = reactive([
   {label:"订单id",prop:"idzhenpiOrderList",width:"100px"},
   {label:"物料名称",prop:"name",width:"300px"},
   {
    label:"当前工艺",
    prop:"state",
        formatter(row,column,value){
        return{
          1:"绗缝",
          2:"刺绣",
        }[value]
      },
      width:"80px"
      
   },
   {label:"原材数量",prop:"zhenpiyuancai",width:"80px"},
   {label:"绗缝产出",prop:"hangfengChanchu",width:"80px"},
   {label:"绗缝报废",prop:"hangfengbaofei",width:"80px"},
   {label:"刺绣产出",prop:"cixiuchanchu",width:"80px"},
   {label:"刺绣报废",prop:"cixiubaofei",width:"80px"},
   
   //  {
  //  {
  //   label:"菜单类型",
  //   prop:"type",
  //   formatter(row,column,value){
  //       return{
  //         1:"菜单",
  //         2:"按钮",
  //       }[value]
  //     }
  //  },
  //  {
  //   label:"菜单状态",
  //   prop:"state",
  //   formatter(row,column,value){
  //       return{
  //         1:"正常",
  //         2:"禁用",
  //       }[value]
  //     }
  // },
  //  {
  //    label:"用户状态",
  //    prop:"state",
  //    formatter(row,column,value){
  //      return{
  //        0:"试用期",
  //        1:"在职",
  //        2:"离职"
  //      }[value]
  //    }
  //  },
  //  {label:"注册时间",prop:"createTime"},
  //  {label:"最后登录时间",prop:"lastLoginTime"},
 ])

 
   // 查询按钮
   const onChaxun = ()=>{
     console.log(formInline.value,"开始查询")
     const {...data} = formInline.value
     qGetUser(data)
   }
   //筛选
   const search = ref('')
   const filterTableData = computed(() =>
     tableData.filter(
       (data) =>
         !search.value ||
         data.name.toLowerCase().includes(search.value.toLowerCase())
     )
   )
  //  table中的编辑按钮
   const handleEdit = (index,row) => {
     console.log(index, row)
     editFormVisible.value = true
     const {...data} = toRaw(row)
     console.log(data)
     editForm.value = data
   }
   //table中的删除按钮
   const handleDelete = (index,row) => {
     console.log(index, row)
     const data = {}
     data.idzhenpiList = row.idzhenpiList
     deletezhenpiList(data).then(res=>{
        console.log(res)
        qGetUser()
     }).catch(err=>{
        console.log(err)
     })
   }


  
 
 // 取消新增用户并清空表单
 const quxiaoUserForm = ()=>{
   userFormVisible.value = false
   addUserForm.value = {}
 }
 // 取消编辑用户并清空表单
 const quxiaoEditForm = ()=>{
    editFormVisible.value = false
 }

 //确认新增用户
 const querenUserForm = ()=>{
   console.log(addUserForm.value)
   const data = addUserForm.value
   addzhenpiList(data).then(res=>{
     console.log(res)
     qGetUser()
   }).catch(err=>{
     console.log(err)
   })
   userFormVisible.value = false
   addUserForm.value = {}
 }

  //确认编辑用户
  const querenEditForm = ()=>{
   console.log(editForm.value)
   const data = toRaw(editForm.value)
   console.log(data)
   editzhenpiList(data).then(res=>{
     console.log(res)
     qGetUser()
   }).catch(err=>{
     console.log(err)
   })
   editFormVisible.value = false
 }
 //确认下一道工序
 const querenGongxuForm = ()=>{

  console.log('下一道工序',tanchuangData.value)
  tanchuangData.value.forEach(item => {
    item.state = Number(item.state) + 1
  });
  editzhenpiOrderList(tanchuangData.value).then(res=>{
    console.log(res)
    rukuFormVisible.value = false
    tanchuangData.value = ''
    qGetUser()
  }).catch(err=>{
    console.log(err)
    tanchuangData.value = ''
  })
  
 }

    //获取列表数据
    const qGetUser = (data)=>{
    getzhenpiOrderList(data).then(res=>{
         console.log(res)
         tableData.value = res.data
         console.log(tableData.value)
     })
   }

   
   
 //页面初始化立即查询数据
   onMounted(()=>{
     qGetUser()
   })

 

 
   </script>
 <style lang="scss" scoped>
 
 .query-form{
   background: #fff;
   border-radius: 5px;
   padding: 18px 20px 0;
 
 }
 .base-table{
   margin-top: 10px;
   padding: 10px;
   border-radius: 5px;
   background: #fff;
 }
    .addButton{
     margin-bottom: 10px;
    }
    .el-table{
     // border-top: 1px solid #bcbcbc;
    }
    .demo-form-inline .el-input {
   --el-input-width: 190px;
 }
 
 .demo-form-inline .el-select {
   --el-select-width: 200px;
 }
 .action{
   border-radius: 5px 5px 0px 0px;
   padding: 5px 0px 10px 20px;
   border-bottom: 1px solid #ece8ee;
 }
 
 .demo-form-inline1{
//    padding: 10px 40px;
padding-top: 10px;
  //  margin-left: 50%;
  //  transform: translateX(-50%);
 }
 
 .demo-form-inline1 .el-input {
   --el-input-width: 500px;
 }
 
 .demo-form-inline1 .el-select {
   --el-select-width: 220px;
 }
 </style>